<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>JavaScript应用</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

		<!--css,js-->
		<style type="text/css">

			body {
				background: #EEF3FA;
				background: -webkit-linear-gradient(top,#4A8AB9 0%,#EEF3FA 40%);
			    background: linear-gradient(top,#CADCE9 0%,#EEF3FA 40%);
			    padding: 28% 0;
			    overflow: hidden;

			}
			
			.tuzi {
				
				position: absolute;
				width:100px;
				height: 50px;

				left:300px;
				top:-75px;

				background: url(img/奔跑的兔子.png) no-repeat;
				background-position:0px -3px;

				transform: scale(2);
			}

			.ground {
				height:100px;
				width: 100%;
				position: absolute;
				bottom: 0px;
				background: url(img/grass.jpg);


			}

			.clound {
				width:200px;
				height:60px;
				background:#fff;
				border-radius:200px;
				position:relative;
				top: -260px;
				right:-1000px;
			}
			.clound:before,.clound:after {
				content:"";
				width:100px;
				height:80px;
				background:#fff;
				border-radius:100px; 
				position:absolute;
				top:-15px;
				left:10px;
				transform:rotate(30deg)}
			.clound:before {
				width:120px;
				height:120px;
				border-radius:120px;
				top:-55px;
				right:15px;
				left:auto;
			}

			@-webkit-keyframes moveclouds {
				0% {
					margin-left:-1000px;
				}
				100% {
					margin-left:-3000px;
				}
			}

			@keyframes moveclouds {

				/*起始点*/
				0% {
					margin-left:2000px;
				}


				/*最终点*/
				100% {
					margin-left:-2000px;
				}

			}
			
			.s1 {
				-webkit-animation:moveclouds 28s infinite ease;
				animation:moveclouds 18s infinite ease;
			}
			.s2 {
				left:-2200px;
				-webkit-animation:moveclouds 20s infinite ease;
				animation:moveclouds 10s infinite ease;
				transform:scale(0.6);
				opacity:0.6;
			}

			.s3 {
				left:-1200px;
				top:-560px;
				-webkit-animation:moveclouds 20s infinite ease;
				animation:moveclouds 20s infinite ease;
				transform:scale(0.7);
				opacity:0.7;
			}

			.s4 {
				left:-1300px;
				top:-580px;
				-webkit-animation:moveclouds 25s infinite ease;
				animation:moveclouds 25s infinite ease;
				transform:scale(0.8);
				opacity:0.8;
			}

			.s5 {
				left:-2400px;
				top:-520px;
				-webkit-animation:moveclouds 28s infinite ease;
				animation:moveclouds 25s infinite ease;
				transform:scale(0.9);
				opacity:0.9;
			}
			
			
			@keyframes bang_frames {

				/*起始点*/
				0% {
					right:100px;
					transform:rotate(0deg);
				}


				/*最终点*/
				100% {
					right:1000px;
					transform:rotate(360deg);
				}

			}


			
			.gold {
				top: 100px;
				left:500px;
				position: absolute;
				box-sizing: border-box;
				z-index: 99; 	/*为了不被云朵遮挡*/
			} 
			
			.point {
				font-size: 26px;
			    font-family: 微软雅黑;
			    padding: 19px 15px;
			    z-index: 1000;
			    color: #860D61;
			    position: absolute;
			    top:0;
			    right: 0;
			}

			.point font {
				color: orange;
    			font-size: 28px;
			}



		</style>


		<script type="text/javascript">


			function getTop(ele){
				return ele.offsetTop;
			}

			//拿到dom元素的left值
			function getLeft(ele){
				return ele.offsetLeft;
			}


			function checkTouch($dom){

				var tuzi = document.getElementById('tuzi');

				var W = tuzi.clientWidth * 2; //兔子的宽度
				var H = tuzi.clientHeight * 2; //兔子的高度

				

				var p_X = (tuzi.offsetLeft * 1 + W / 2); //兔子的当前横坐标
				var p_Y = (tuzi.offsetTop  * 1 + H / 2); //兔子的当前纵坐标

				//console.log(p_X + "," + p_Y);


				var w = $dom.width(); //金币的宽度
				var h = $dom.height(); //金币的高度

				var m_top = getTop($dom.get(0));	//金币的当前纵坐标
				var m_left = getLeft($dom.get(0));  //金币的当前横坐标

				var m_X = (m_left * 1 + w/2);
				var m_Y = (m_top * 1 + h/2);
				

				//console.log(Math.abs(p_Y - m_Y) + "========" + (H + h) / 2)
				
				if(Math.abs(p_X - m_X) <= (W + w) / 2    &&   Math.abs(p_Y - m_Y) <= (H + h) / 2 ){
					
					return true;
				}
				
				return false;
				
			}
			
			//对金币管理类的封装

			var goldManager = new Object();

			goldManager.create = function(){


				//1、拿到屏幕的总宽度
				var w = $(window).width() - 30;

				var v_top = -690;
				var v_left = Math.floor(Math.random() * w);

				var html  = "<img src='img/gold/左斜转0000.png' class='gold' style='top:"+v_top+"px;left:"+v_left+"px'></img>";	

				$('.ground').eq(0).append(html);

				//clearInterval(goldManager.timer);

			}

			goldManager.timer = null;


			goldManager.draw = function(){

				this.timer = setInterval(goldManager.create,500);
			}


		</script>


	

		<script type="text/javascript">

			var time = new Date().getTime(); //游戏的初始时间


			var running = null ;//兔子奔跑的定时器

			var goLeft = false;
			var goRight = false;

			var step = 8;

			var positions_1 = ['0 -3','-115 -3','-230 -3','-348 -3'];
			var positions_2 = ['0 -76','-115 -76','-230 -76','-348 -76'];
			var positions_3 = ['0 -162','-115 -162','-230 -162','-348 -162'];

			var positions = positions_1;

			//兔子往左移动

			function tuziGoLeft(){

				var tuzi = document.getElementById('tuzi');

				//1、拿到当前对象的left
				var v_left = tuzi.offsetLeft - step;
				//2、重新设置left的值
				tuzi.style.left = v_left;
			}

			//兔子往右移动
			function tuziGoRight(){

				var tuzi = document.getElementById('tuzi');

				//1、拿到当前对象的left
				var v_left = tuzi.offsetLeft + step;
				//2、重新设置left的值
				tuzi.style.left = v_left;
			}



			window.onload = function(){
				animation(document.getElementById('tuzi'),"img/奔跑的兔子.png");
			}
			


			/**
			 * 帧动画函数
			 * ele 需要控制的DOM元素
			 * imgUrl 图片地址
			 */
			 function animation(ele,imgUrl){

					//变更元素的背景图素材
			        ele.style.backgroundImage = 'url('+imgUrl+')';
			        ele.style.backgroundRepeat = 'no-repeat';
			        var index = 0;
			        function run(){
	
						 index++;
				            if (index >= positions.length) {
				                index = 0;
				            }
			            var position = positions[index].split(' ');
			            ele.style.backgroundPosition = position[0]+'px '+position[1]+'px';
			           


			        }
			       
				    running = setInterval(run,80);


			        //clearInterval(running); //清除定时器
			    }


			    window.onkeydown = function(e){

					//每一个按键都有一个对应的code
					//console.log(e.keyCode);

					//A
					if(e.keyCode == 65){
						goLeft = true;	

					//D
					}else if(e.keyCode == 68){
						goRight = true;		
					}

				}


				 window.onkeyup = function(e){

					//每一个按键都有一个对应的code
					//console.log(e.keyCode);

					//A
					if(e.keyCode == 65){
						goLeft = false;	

					//D
					}else if(e.keyCode == 68){
						goRight = false;		
					}

				}


				//游戏全局定时器
				var timer = setInterval(function(){

					var count = $('.point font').eq(0).html() * 1;

					if(goLeft){
						tuziGoLeft();
					}

					if(goRight){
						tuziGoRight();
					}



					$(".gold").each(function(){


						//判断是否与兔子发生碰撞

						if(checkTouch($(this))){

							$(this).remove();

							//播放金币的音效
							//document.getElementId('audio').play();
							console.log('碰到了！');
							document.getElementById('audio').play();

							//更改当前吃到的金币个数
							
							$('.point font').eq(0).html(count + 1) ;

						}

					});

					//console.log(count);
					if(count >= 2){
						positions = positions_2;	
						
					}

					if(count >= 5){
						positions = positions_3;
							
					}

					if(count >= 20){

						var total = ( new Date().getTime() - time ) / 1000 ;

						alert('恭喜你，通关啦！总共耗时 ' + total + "秒");
						clearInterval(timer);
						clearInterval(timer2);
						clearInterval(running);


						//计入排行榜

						//读取之前的排行榜


						var pm_1 = getData("pm_1") || 99;
						var pm_2 = getData("pm_2") || 99;
						var pm_3 = getData("pm_3") || 99;
						var pm_4 = getData("pm_4") || 99;
						var pm_5 = getData("pm_5") || 99;
						var pm_6 = getData("pm_6") || 99;


						var arr = [];

						arr.push(pm_1 * 1);
						arr.push(pm_2 * 1);
						arr.push(pm_3 * 1);
						arr.push(pm_4 * 1);
						arr.push(pm_5 * 1);
						arr.push(pm_6 * 1);

						arr.push(total); //加入本次的用时

						arr = arr.sort(
										function(a,b){
            								return a-b ;
            							}
            						 );


						



						saveData('pm_1',arr[0]);
						saveData('pm_2',arr[1]);
						saveData('pm_3',arr[2]);
						saveData('pm_4',arr[3]);
						saveData('pm_5',arr[4]);
						saveData('pm_6',arr[5]);

						



						$('#pm_1').html(arr[0]);
						$('#pm_2').html(arr[1]);
						$('#pm_3').html(arr[2]);
						$('#pm_4').html(arr[3]);
						$('#pm_5').html(arr[4]);
						$('#pm_6').html(arr[5]);


						$('.paihang').eq(0).show();

					}


				},30);


				//金币旋转逻辑代码
				var imgs = ['0000','0001','0002','0003','0004','0005','0006','0007','0008','0009','0010','0011','0012','0013','0014','0015'];

				var count = 0;

				//定时器
				var height = 0;

				var timer2 = setInterval(function(){

					if(count >= 15){
						count = 0;
					}
		       	
		       		//操作所有class为gold的元素，反复变更其src的指向，每隔100毫秒变更一次


		       		
					$(".gold").attr("src", "img/gold/左斜转" + ( imgs[count++] ) + ".png");


					$(".gold").each(function(){

						var current_top = this.offsetTop;


						//如果金币碰到地面，也消失
						if(current_top >= -60){
							$(this).remove();
						}

						this.style.top = (current_top + 8) + "px";


					});



				},50);


				goldManager.draw();

				//clearInterval(timer);
				//clearInterval(timer2);	




				function saveData(key,value){
					//保存一个数据
					localStorage.setItem(key,value);
					console.log("数据保存成功！");
				}

				function getData(key){
	       			
	       			return localStorage.getItem(key);

				}

				function clearData(){

					localStorage.clear();
					console.log("数据清除完毕！");
				}

				
				
		</script>

	</head>
<body>

	<span class='point'>金币个数：<font>0</font></span>
	<audio id="bgmusic" style="position:absolute;right:0px;top:76px;" controls src="sound/bg.mp3" autoplay="autoplay" loop="loop"></audio>
	

	


	<!-- <img src='img/gold/左斜转0000.png' class='gold' style='top:100px;left:300px'></img> -->


	<div class="clound s1"></div>
	<div class="clound s2"></div>
	<div class="clound s3"></div>
	<div class="clound s4"></div>
	<div class="clound s5"></div>
	
	

	<div class='ground'>
		
		<div id="tuzi" class='tuzi'></div>

	</div>
	<audio id="audio" src="sound/Coin.mp3"></audio>
	
	<style type="text/css">
		
		

		.paihang {
		    width: 300px;
		    height: 300px;
		    border: 1px solid #666;
		    /* margin: 100px auto; */
		    position: absolute;
		    top: 153px;
		    left: 50%;
		    margin-left: -120px;
		    z-index: 2888;
		    background-color: #E6D5B5;
		    display: none;
		}

		.paihang .info {
			text-align: center;
			line-height: 30px;
			height:30px;
			color:#666;
			font-weight: 600;
			margin-top:20px;
		} 

		.paihang .info span {

			color:red;
			font-size: 36px;
		}

		.paihang .info font {
				
			color:red;
			font-size: 36px;

		}

	</style>
	<div class="paihang">
		
		<div class='info'><span>1.</span>未命名 用时 <font id="pm_1"></font> 秒</div>
		<div class='info'><span>2.</span>未命名 用时 <font id="pm_2"></font> 秒</div>
		<div class='info'><span>3.</span>未命名 用时 <font id="pm_3"></font> 秒</div>
		<div class='info'><span>4.</span>未命名 用时 <font id="pm_4"></font> 秒</div>
		<div class='info'><span>5.</span>未命名 用时 <font id="pm_5"></font> 秒</div>
		<div class='info'><span>6.</span>未命名 用时 <font id="pm_6"></font> 秒</div>

	</div>


</body>
</html>